<template>
  <h2>这是子组件</h2>
  <grand-son-demo/>

  <div class="slot_demo_class">
    <div class="slogan_slot">
      <slot name="left_slogan_slot">
        <p>这是默认插槽，这是一个左侧广告栏</p>
      </slot>
    </div>
    <div class="slogan_slot">
      <slot name="right_slogan_slot">
        <p>这是另一个默认插槽，这是一个右侧的广告栏</p>
      </slot>
    </div>
    <div class="slogan_slot">
      <slot name="temp_slogan_slot" :tempInt="123">
        <p>这是临时插槽，但我可以传递参数给父组件</p>
      </slot>
    </div>
  </div>
</template>

<script setup>

import GrandSonDemo from "./GrandSonDemo.vue";
</script>


<style scoped>
.slot_demo_class {
  color: red;
  display: flex;
}
.slogan_slot {
  /* 每个插槽区域平分剩余空间 */
  flex: 1;
}
</style>